import {designPage} from "plain-design-composition";
import {DemoRow} from "../../Demo/DemoRow";
import {useTableOption} from "../../../module/useTableOption";
import {AutoTable, Plc, PlcAddress, PlcDate, PlcInput, PlcNumber, PlcOv, PlcSelect, SelectOption} from "../../../../packages";

export const demo1 = designPage(() => {

  const option = useTableOption({
    url: '/demo',
    // size: 'normal',
    // showRows: 1,
    // loadOnStart: false,
    // filterFormColumn: 2,
    /*permit: {
      show: {
        // insert: false,
        // update: false,
        // delete: false,
        // other: false,
        codes: {
          'outer-update': false,
        }
      },
      disabled: {
        insert: true,
      },
    },*/
  });

  const onClick = () => {
    console.log('click');
  };

  const selectOptions = [
    { label: '消费者', status: 'consumer' },
    { label: '潜在客户', status: 'potential' },
    { label: '门店', status: 'store' },
  ];

  const filterConfig = {
    // formItemAttrs: { column: 2 }
  };

  return () => (
    <DemoRow title="基本用法">
      <AutoTable option={option}>
        <Plc title="编号" field="id" link onClick={onClick} hideInForm filterConfig={filterConfig}/>
        <PlcDate title="创建时间" field="createdAt" hideInForm width={200} editable={false} datetime/>
        <PlcDate title="更新时间" field="updatedAt" hideInForm width={200} editable={false} datetime/>
        <PlcDate title="日期" field="dateVal" displayFormat="YYYY年MM月DD日" overflowTooltip/>
        <PlcOv title="选项值" field="ovVal" ov="promotion"/>
        <PlcAddress
          provinceField="provinceVal"
          cityField="cityVal"
          districtField="districtVal"
        />
        <PlcNumber title="计数" field="count" required/>
        <PlcInput title="文本" field="normalText" required width={150} fixed="left" filterConfig={filterConfig}
                  v-slots={{
                    normal: ({ row }) => (
                      <span>[{row.normalText}]</span>
                    )
                  }}
        />
        <PlcNumber title="数字" field="numberVal"/>
        <PlcSelect title="下拉选择" field="selectVal">
          {selectOptions.map((item) => (
            <SelectOption children={item.label} value={item.status} key={item.status}/>
          ))}
        </PlcSelect>
        <PlcInput title="邮箱(校验测试)" field="email" validateType="email"/>
      </AutoTable>
    </DemoRow>
  );
});
